<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-menu class="el-menu-vertical-demo" router mode="horizontal">
                    <el-menu-item index="1"><el-icon>
                            <Headset />
                        </el-icon>推荐</el-menu-item>
                    <el-menu-item index="2"><el-icon>
                            <VideoPlay />
                        </el-icon>排行榜</el-menu-item>
                    <el-menu-item index="3"><el-icon>
                            <Star />
                        </el-icon>歌单</el-menu-item>
                    <el-menu-item index="4"><el-icon>
                            <Sunrise />
                        </el-icon>主播电台</el-menu-item>
                    <el-menu-item index="4"><el-icon>
                            <Pointer />
                        </el-icon>歌手</el-menu-item>
                    <el-menu-item index="4"><el-icon>
                            <Pointer />
                        </el-icon>新碟上架</el-menu-item>
                </el-menu>
            </el-header>
            <el-main></el-main>
        </el-container>
    </div>
</template>
<script setup>
</script>
<style scoped>
.el-header {
    height: 50px;
    background: #f4dada;

    .el-menu {
        height: 50px;
        background: #f4dada;
        display: flex;
        justify-content: space-evenly;
    }
    .el-menu-item:hover {
            background: #eeb9b9;
            color: white;
        }
}
</style>
